<template>
  <div id="screen">
    <div @click.stop="hides" v-show="actives===0||actives===2||actives===3" class="shade" @touchmove.prevent></div>
    <div class="header">
      <div class="nav">
        <ul>
          <li @click="hide(index)" v-for="(item, index) in list_nav" :key="index" :class="{active:actives==index}">{{item}}</li>
        </ul>
      </div>
      <div class="hide">
        <div class="hide_zh" v-show="actives===0">
          <ul>
            <li @click="hideZh(index)" :class="{active_gx:actives_zh==index}" v-for="(item, index) in list_zh" :key="index">{{item}}</li>
          </ul>
        </div>
        <div class="hide_fw" v-show="actives===2">
          <ul>
            <li @click="hideFw(index)" :class="{active_fw:actives_fw==index}" v-for="(item, index) in list_fw" :key="index">{{item}}</li>
          </ul>
          <div>
            <input type="reset" value="重置">
            <input type="submit" value="提交">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'screen',
  data () {
    return {
      text: '',
      actives: '',
      actives_zh: '',
      actives_fw: '',
      hide_zh: false,
      hide_fw: false,
      show: false,
      list_nav: [
        '综合', '销量', '服务', '筛选'
      ],
      list_zh: [
        '综合', '最新上架', '价格最低', '价格最高', '评价最高'
      ],
      list_fw: [
        '有货优先', '货到付款', '海囤全球', 'PLUS专享促销', '促销商品', '配送全球'
      ]
    }
  },
  mounted () {
  },
  methods: {
    hides () {
      this.actives = ''
      this.actives_zh = ''
      this.actives_fw = ''
      console.log(this.actives + this.actives_zh)
    },
    hide (index) {
      this.actives = index
      console.log(index)
    },
    hideZh (index) {
      this.actives_zh = index
      this.list_nav[0] = this.list_zh[index]
    },
    hideFw (index) {
      this.actives_fw = index
    }
  },
  watch: {
    function (newVal, oldVal) {
      // this.hide(0)
    }
  }
}
</script>

<style scoped lang="less">
#screen {
  .shade {
    width: 100%;
    height: 1334px;
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
  }
  .header {
    background: rgba(255, 255, 255, 1);
    border-bottom: 1px solid rgba(55, 55, 55, 0.9);
    position: relative;
    z-index: 999;
    .nav {
      ul {
        display: flex;
        li {
          padding: 20px 0;
          text-align: center;
          width: 25%;
        }
      }
    }
    .hide {
      position: absolute;
      left: 0;
      background: rgba(255, 255, 255, 1);
      width: 100%;
      .hide_zh {
        li {
          padding: 15px;
        }
      }
      .hide_fw {
        li {
          background: url("../../../static/image/ico/勾选0.png") left 20px
            center no-repeat;
          padding: 25px 0 25px 60px;
        }
        div {
          display: flex;
          input {
            width: 50%;
            height: 80px;
            font-size: 28px;
          }
          input:first-child {
            color: rgba(255, 0, 0, 1);
          }
          input:first-child {
            background: rgba(255, 0, 0, 1);
            color: rgba(255, 255, 255, 1);
          }
        }
      }
    }
  }
}
.active {
  color: rgba(255, 0, 0, 1);
}
.active_gx {
  color: rgba(255, 0, 0, 1);
  background: url("../../../static/image/ico/勾选.png") right 20px center
    no-repeat;
}

.active_fw {
  color: rgba(255, 0, 0, 1);
  background: url("../../../static/image/ico/勾选1.png") left 20px center
    no-repeat;
  padding: 25px 0 25px 60px !important;
}
</style>
